<template>
	<view class="cart-container">
		<view class="cart-box" v-if="cart.length !==0">
			<my-address></my-address>
			<view class="cart-title">
				<uni-icons type="shop" size="30"></uni-icons>
				<text class="cart-title-text">购物车</text>
			</view> 
			
			<uni-swipe-action >
				<block v-for="goods in cart" :key="goods.goods_id">
					<uni-swipe-action-item :right-options="options1" @click="bindClick(goods.goods_id)">
						<my-goods :item="goods" :showRadio="true" :showNum="true" @radio-change="radioChangeHandler" @changeNumHandler="changeNumHandler" /> 
					</uni-swipe-action-item>
				</block>	
			</uni-swipe-action>
			
			<view class="settle">
				<label class="radio" @click="triggerCheckAll">
					<radio :checked="cartGoodsIsAllChecked"  color="#ff0000" /><text>全选</text>
				</label>
					
				<view class="total" >
					<text>合计：</text>
					<text class="money">¥{{money}}</text>
				</view>
				
				<view class="total-num" @click="settle">
					结算（{{cartGoodsNumChecked}}）
				</view>
			</view>
		</view>
		
		<view class="cart-empty-box" v-else>
			<image src="/static/cart_empty@2x.png" ></image>
			<text class="empty-words">空空如也~</text>
		</view>
		
	</view>
</template>
	
<script>
	import badgeMix from '@/mixins/tabbar-badge.js'
	import {mapState,mapMutations,mapGetters} from 'vuex'
	export default {
		mixins:[badgeMix],
		data(){
			return {
				options1:[{
					text:'删除',
					style:{
						backgroundColor:'#ff0000',
					}
				}]
			}
		},
		computed:{
			...mapState('m_cart',['cart']),
			...mapState('m_user',['token','address']),
			...mapGetters('m_cart',['cartGoodsNumChecked','total','money']),
			cartGoodsIsAllChecked(){
				return this.cartGoodsNumChecked == this.total
			}
		},
		methods:{
			...mapMutations('m_cart',['updateGoodsStatus','updateGoodsCount','updateGoodsList','updateAllGoodchecked']),
			bindClick(goodsId){
			  this.updateGoodsList(goodsId)
			},
			radioChangeHandler(goodsObj){
				console.log(goodsObj);
				this.updateGoodsStatus(goodsObj)
			},
			changeNumHandler(goodsNumObj){
				this.updateGoodsCount(goodsNumObj)
			},
			triggerCheckAll(){
				 let flag=!this.cartGoodsIsAllChecked
				 this.updateAllGoodchecked(flag)
			},
			settle(){
				if(!this.cartGoodsNumChecked) return uni.$showMsg('请选择要结算的商品!')
				if(JSON.stringify(this.address)=='{}') return uni.$showMsg('请选择收货地址')
				if(!this.token) return uni.$showMsg('请先登录账号')
			}
		}
	}
</script>

<style lang="scss">
	.cart-container{
		padding-bottom: 50px;
.cart-title{
	display: flex;
	border-bottom: solid 1px lightgrey;
	align-items: center;
	font-weight: bold;
	padding: 5px 0;
	.cart-title-text{
		margin-left: 10px;
	}
}

.settle{
	position: fixed;
	z-index: 10;
	background-color: white;
	height: 50px;
	display: flex;
	justify-content: space-between;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	padding: 0 5px;
	align-items: center;
	.money{
		color: #ff0000;
		font-weight: bolder;
	}
	
	.total-num{
		background-color: #ff0000;
		height: 50px;
		line-height: 50px;
		text-align: center;
		min-width: 100px;
		color: white;
	}
}

.cart-empty-box{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding-top: 150px;
		image{
			width: 120px;
			height: 120px;
		}
		text{
			margin-top: 10px;
			font-size: 13px;
			color: darkgray;
		}
}
	}
</style>
